<template>
  <div class="tu-input-number">
    <el-input-number
      v-model="tuLeftModel"
      class="tu-left-range"
      v-bind="dateOption"
      :placeholder="searchItem?.itemAttrs?.placeholder?.[0] || ''"
      @change="rangeChange"
    />
    <div class="tu-center-icon">
      -
    </div>
    <el-input-number
      v-model="tuRightModel"
      class="tu-right-range"
      v-bind="dateOption"
      :placeholder="searchItem?.itemAttrs?.placeholder?.[1] || ''"
      @change="rangeChange"
    />
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue';
import type { SearchItemType } from '../../TableType';

const props = defineProps<{
  searchItem: SearchItemType
}>()

const emits = defineEmits<{
  (e: 'rangeChange', data: string[], propName: string): void
}>()

const tuLeftModel = ref()
const tuRightModel = ref()

// 固定配置
const fiexdOption = {
  controls: false
}

// 合并属性
const dateOption = {
  ...(props?.searchItem?.itemAttrs || {}),
  ...fiexdOption
}

// 数字改变事件
const rangeChange = () => {
  emits('rangeChange', [tuLeftModel.value, tuRightModel.value], props.searchItem.prop)
}

// 重置数字范围
const resetFields = () => {
  tuLeftModel.value = props.searchItem.defaultValue?.[0] || ''
  tuRightModel.value = props.searchItem.defaultValue?.[1] || ''
}

defineExpose({
  resetFields
})
</script>

<style scoped lang='scss'>
.tu-input-number {
  display: flex;
  width: 100%;
  height: 32px;
  line-height: 30px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0 11px;

  .tu-left-range {
    width: calc(50% - 13px);
  }

  .tu-center-icon {
    width: 20px;
    padding: 0 6px;
    text-align: center;
    background-color: #fff;
  }

  .tu-right-range {
    width: calc(50% - 13px);
  }

  :deep(.el-input-number.is-without-controls .el-input__wrapper) {
    padding: 0;
    box-shadow: none;
  }
}
</style>